<template>
  <div>
	  
    <el-card class="box-card">
          <div v-for="index in levelProblem" :key="index" class="text item" style="margin-top: 5px;">

              <el-link style="font-size: 18px;" type="info" @click="showDetail(index.id)">{{index.question}}</el-link><span style="float: right;">
              	
-{{index.startTime}}</span> 

			
          </div>
      <!-- size-change:每页显示的条数改变时触发的函数
          current-change：当前页码改变时触发的函数
      -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryinfo.pageNum" :page-sizes="[10, 2, 4, 5]" :page-size="queryinfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!--  问题详情对话框-->
    <el-dialog  title="问题详情" :visible.sync="proDia">
      <el-descriptions title="问题信息">
        <el-descriptions-item label="问题">{{this.problemDetail.question}}</el-descriptions-item>
        <el-descriptions-item label="内容">{{ this.problemDetail.answer }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="proDia=false">取 消</el-button>
        <el-button type="primary" @click="proDia = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import qs from "qs";

export default {
name: "Problem1" ,
  data(){
  return{
    queryinfo:{
      pageNum:1,
      pageSize:10
    },
    total:0,
    //保存不同类别的问题
    levelProblem:[] ,
    //保存单个问题信息
    problemDetail:'' ,
    //跳转传值  问题类别
    classId:1,
    //问题详情对话框
    proDia:false
  }
  },
  methods:{
  //根据类别查询问题
   async queryPro(){
      let res = await this.$http.post('selectAllByClassId?classId='+this.classId,qs.stringify(this.queryinfo));
      // 处理返回值信息，并给出不同的信息提示
      if (res.data.code == 200) { // 查询成功
        this.$message.success(res.data.message);
        this.levelProblem = res.data.data.records;
        this.total = res.data.data.total;
		// this.classId='';
      } else {
        this.$message.error(res.data.message);
      }
    } ,
    //点击文字连接，显示详情
    async showDetail(id){
      this.proDia = true;
      let res = await this.$http.post('selectOneById?id='+id);
      if (res.data.code == 200) { // 查询成功
        this.$message.success(res.data.message);
        this.problemDetail = res.data.data;     //TODO
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 每页条数改变的函数
    handleSizeChange(newpagesize) {
      this.queryinfo.pageSize = newpagesize;
      this.queryinfo.pageNum = 1;
      this.queryPro();
    },
    // 改变查询页数的函数
    handleCurrentChange(newpagenum) {
      this.queryinfo.pageNum = newpagenum;
      this.queryPro();
    }
  },
  mounted() {
	  var claId=this.$route.query.classId;
	  // console.log(claId)
	  if(claId!=undefined){
		  this.classId =claId;
	  }
    this.queryPro();
  }
}
</script>

<style scoped>
      .box-card{
        height: 386px;
        background-color: #b3c0d1;
      }
</style>